<template>
    <div class="school-number">
        <el-card class="box-card" v-for="(item, index) in schoolNumberList" :key="index">
            <div slot="header" class="clearfix">
                <span>学院信息：</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                    @click="toSomePage(item.XYDM)">查看剩余宿舍</el-button>
            </div>
            <div class="text item">
                {{ '学院名称：' + item.XY }}
            </div>
            <div class="text item">
                {{ '学院代码：' + item.XYDM }}
            </div>
            <div class="text item">
                {{ '学院人数：' + item.count }}
            </div>
        </el-card>
    </div>
</template>

<script>
import { getCollegeNumber } from '@/api/dormitory/dormitory-assignment/school-number'
export default {
    name: 'SRSUiSchoolNumberView',

    data() {
        return {
            schoolNumberList: []
        };
    },

    mounted() {
        this.getSchoolNumber()
    },

    methods: {
        getSchoolNumber() {
            getCollegeNumber().then(res => {
                this.schoolNumberList = res.rows
            })
        },
        toSomePage(i) {
            this.$router.push({
                path: '/dormitory/newstudormitory/building-number',
                query: { collegeId: i }
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.school-number {
    padding: 50px;
    display: flex;
    flex-wrap: wrap;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 280px;
    margin: 10px;
}
</style>